// 自调用函数
(function() {
	// 封装函数
	var setFont = function() {
		// 获取html元素
		var html = document.documentElement;
		// var html = document.querySelector('html');
		// 获取宽度
		var width = html.clientWidth;
		// 如果小于1024，那么就按1024
		if (width < 960) {
			width = 960;
		}
		// 如果大于1920，那么就按1920
		if (width > 1920) {
			width = 1920;
		}
		// 计算
		var fontSize = width / 80 + 'px';
		// 设置给html
		html.style.fontSize = fontSize;
	}
	setFont();
	// onresize：改变大小事件
	window.onresize = function() {
		setFont();
	}

})();

// 左上角数据
(function() {
	let itemView = $(".overview").find(".inner .item h4")

	$.ajax({
		type: "post",
		url: 'https://px.aibaiba.com/api/Largescreen/datavstudent',
		// contentType: "application/json; charset=utf-8",
		dataType: 'json',
		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
		data: '',
		error: function(data) {
			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
			} else {
				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
			}
		},
		success: function(data) {
			itemView[0].innerHTML = data.data.student_num
			itemView[1].innerHTML = data.data.gaozhong
			itemView[2].innerHTML = data.data.chuzhong
			itemView[3].innerHTML = data.data.student_qita
		}
	});

})();
// 座位数据

(function(){
	
	let userMonitor = $(".column").find(".map .chart .geo")
	$.post(
		'https://px.aibaiba.com/api/Comp.Seat/index',
		function(res, status) {
			// let userMonitorRow = $(".monitor").find(".inner .row ")
			let list = res.seat;
			let base = 2
			if (list) {
				let htmls = ''
				// ${list[var1][k].seat_name}
				let images = {
					'1':'unselected1',
					'2':'selected',
					'3':'bought'
				}
				for (let var1 in list) {
					htmls += '<div class = "row">'
					if(list[var1]){
						for (let k in list[var1]){
							let num = list[var1][k].num
							// <span class = "${'size-'+size}"></span>
							// <span class = "loader"></span>
							let size = Math.ceil(parseInt(num)/parseInt(base))
							let dom = `
								<div class="col" style = "${list[var1][k].status==4?'opacity: 0;':''}">
									<div style = "${list[var1][k].status!=4?`position: relative;background: url(images/${images[list[var1][k].status]}.png) 100% 100% no-repeat;`:'opacity: 0;overflow: hidden;'}" class="seat ${'image'+list[var1][k].status}">
										<div class = "absolute" style = "${list[var1][k].status==4?'opacity: 0;':''} position: absolute;inset: 0;">
											<span class = "${'size'+size}"></span>
										</div>
									</div>
									<div style = "${list[var1][k].status==4?'opacity: 0;':''} font-size:14px; margin-bottom:20px; color:#fff;width:50px;text-align:center;">${list[var1][k].student_name?list[var1][k].student_name:list[var1][k].seat_name}</div>
								</div>
							`
							htmls = htmls + dom
						}
					}
					
					htmls += '</div>'
				}
				// let htmls = ''
				// list.map(t=>{
				// 	htmls += '<div>'
				// 	if(t){
				// 		t.map(e => {
				// 			let dom = `
				// 				<div class="row">
				// 					<span class="col ${'image'+e.status}">${e.seat_name}</span>
				// 					<span class="icon-dot"></span>
				// 				</div>
				// 			`
				// 			htmls = htmls + dom
				// 		})
				// 	}
				// 	htmls += '</div>'
					
				// })
				userMonitor.html(htmls)
			}
	
		}
	);
})();
// tab切换

(function() {
	timeUserMonitor()
	window.setInterval(function() {
		timeUserMonitor()
	}, 60000);
	$('.monitor').on('click', '.tabs a', function() {
		// 点击谁给谁加类名，其他去除类名
		$(this).addClass('active').siblings().removeClass('active');
		// 把对应的content显示，其他的隐藏
		var index = $(this).attr('data-index');
		// 显示
		$('.content').eq(index).show().siblings('.content').hide();
	});

})();

// 实时用户监控
function timeUserMonitor() {

	let userMonitor = $(".monitor").find(".inner .row .col")
	$.post(
		'https://px.aibaiba.com/api/Largescreen/datavrec',
		function(res, status) {
			// let userMonitorRow = $(".monitor").find(".inner .row ")
			let userMonitorRow = $(".monitor").find(".marquee")

			let list = res.data
			if (list && list.length > 0) {
				let htmls = ''
				list.map(e => {
					let dom = `
						<div class="row">
							<span class="col">${e.student_name}</span>
							<span class="col">${e.name}</span>
							<span class="col" style='width:5rem'>${e.px_date}</span>
							<span class="icon-dot"></span>
						</div>
					`
					htmls = htmls + dom
				})
				userMonitorRow.html(htmls)
				// 最小20条数据可以不留空余
				let minLength = 20
				let lengthNum = 1
				if (list.length < 10) {
					lengthNum = Math.floor(10 / list.length)
					// 滚动复制一份
					$('.monitor .marquee').each(function() {
						// 拿到了marquee里面的所有row
						for (var i = 0; i < lengthNum; i++) {
							// 追加进去
							var rows = $(this).children().clone();
							$(this).append(rows);
						}
						// 父.append(子)==>子.appendTo(父)
						// $('ul').append($('<li>li</li>'));==>$('<li>li</li>').appendTo('ul');
					});

				} else {
					$('.monitor .marquee').each(function() {
						// 拿到了marquee里面的所有row
						var rows = $(this).children().clone();
						$(this).append(rows);
						// 追加进去

						// 父.append(子)==>子.appendTo(父)
						// $('ul').append($('<li>li</li>'));==>$('<li>li</li>').appendTo('ul');
					});
				}
			}

		}
	);
}


(function() {
	var myChart = echarts.init(document.querySelector('.pie'));
	let itemView = $(".point").find(".data .item h4")
	$.ajax({
		type: "post",
		url: 'https://px.aibaiba.com/api/Largescreen/datavfenbu',
		// contentType: "application/json; charset=utf-8",
		dataType: 'json',
		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
		data: '',
		error: function(data) {
			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
			} else {
				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
			}
		},
		success: function(data) {
			itemView[0].innerHTML = data.data.fenbu_sex&&data.data.fenbu_sex[0]?data.data.fenbu_sex[0].count:0
			itemView[1].innerHTML = data.data.fenbu_sex&&data.data.fenbu_sex[1]?data.data.fenbu_sex[1].count:0
			// cardView[2].innerHTML = data.data.xiaoshou[0].zhuanhualv
			// cardView[3].innerHTML = data.data.xiaoshou[0].liushilv
			let opData = []
			if(data.data.fenbu_grade&&data.data.fenbu_grade.length>0){
				for (let s of data.data.fenbu_grade) {
					opData = [...opData,{
						name:s.name,
						value:s.count,
					}]
				}
			}
			// 返回对象
			// 配置
			var option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
			
				series: [{
					name: '面积模式',
					type: 'pie',
					radius: ['10%', '70%'],
					center: ['50%', '50%'],
					roseType: 'area',
					data: opData,
					labelLine: {
						length: 8,
						length2: 10,
					},
				}],
				color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
				label: {
					fontSize: 10
				},
			
			
			};
			myChart.setOption(option);
		}
	});
	

})();
// 热力图
// (function() {
// 	var myChart = echarts.init(document.querySelector('.geo'));
// 	$.ajax({
// 		type: "post",
// 		url: 'https://px.aibaiba.com/api/Largescreen/datavfenbu',
// 		// contentType: "application/json; charset=utf-8",
// 		dataType: 'json',
// 		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
// 		data: '',
// 		error: function(data) {
// 			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
// 			} else {
// 				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
// 			}
// 		},
// 		success: function(data) {
// 			console.log(data,9999995643543243243)
// 			// cardView[2].innerHTML = data.data.xiaoshou[0].zhuanhualv
// 			// cardView[3].innerHTML = data.data.xiaoshou[0].liushilv
// 			let opData = data.data.fenbu_grade||[]
// 			// 返回对象
// 			// 配置
// 			var option = {
// 				tooltip: {
// 					trigger: 'item',
// 					formatter: '{a} <br/>{b} : {c} ({d}%)'
// 				},
			
// 				series: [{
// 					name: '面积模式',
// 					type: 'pie',
// 					radius: ['10%', '70%'],
// 					center: ['50%', '50%'],
// 					roseType: 'area',
// 					data: opData,
// 					labelLine: {
// 						length: 8,
// 						length2: 10,
// 					},
// 				}],
// 				color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
// 				label: {
// 					fontSize: 10
// 				},
			
			
// 			};
// 			myChart.setOption(option);
// 		}
// 	});
	

// })();
(function() {
	let itemView = $(".users").find(".data .item h4")
	$.ajax({
		type: "post",
		url: 'https://px.aibaiba.com/api/Largescreen/datavfenbu',
		// contentType: "application/json; charset=utf-8",
		dataType: 'json',
		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
		data: '',
		error: function(data) {
			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
			} else {
				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
			}
		},
		success: function(data) {
			itemView[0].innerHTML = data.data.zongliang
			itemView[1].innerHTML = data.data.fuwu_num
			let sData = []
			let xAxisData = []
			if(data.data.xuexirenci&&data.data.xuexirenci.length>0){
				data.data.xuexirenci.map(e=>{
					xAxisData = [...xAxisData,e.month]
					sData = [...sData,e.count]
				})
			}
			var item = {
				name: '',
				value: 1200,
				// 柱子颜色
				itemStyle: {
					color: '#254065'
				},
				// 鼠标经过柱子颜色
				emphasis: {
					itemStyle: {
						color: '#254065'
					}
				},
				// 工具提示隐藏
				tooltip: {
					extraCssText: 'opacity:0'
				}
			}
			var option = {
				tooltip: {
					trigger: 'item',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'line' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					// 距离 上右下左 的距离
					top: '6%',
					right: '3%',
					bottom: '3%',
					left: '0%',
					// 是否包含文本
					containLabel: true,
					// 显示边框
					show: true,
					// 边框颜色
					borderColor: 'rgba(0, 240, 255, 0.3)'
				},
				xAxis: [{
					// 使用类目，必须有data属性
					type: 'category',
					// 使用 data 中的数据设为刻度文字
					// data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					data:xAxisData,
					// 刻度设置
					axisTick: {
						// true意思：图形在刻度中间
						// false意思：图形在刻度之间
						alignWithLabel: true,
						alignWithLabel: false,
						show: false
					},
					// 文字
					axisLabel: {
						color: '#4c9bfd'
					}
				}],
				yAxis: [{
					// 使用数据的值设为刻度文字
					type: 'value',
					// 刻度设置
					axisTick: {
						show: false
					},
					// 文字
					axisLabel: {
						color: '#4c9bfd'
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(0, 240, 255, 0.3)'
						}
					}
				}],
				series: [{
						name: '学习人次',
						type: 'bar',
						barWidth: '60%',
						data:sData,
						// data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
						itemStyle: {
							// 提供的工具函数生成渐变颜色
							color: new echarts.graphic.LinearGradient(
								// (x1,y2) 点到点 (x2,y2) 之间进行渐变
								0, 0, 0, 1,
								[{
										offset: 0,
										color: 'red'
									}, // 0 起始颜色
									{
										offset: 1,
										color: 'blue'
									} // 1 结束颜色
								]
							)
						}
					}
			
				]
			};
			
			var myChart = echarts.init(document.querySelector('.bar'));
			myChart.setOption(option);
		}
	});
	

})();




//右上角数据
function getDingDan(dataObj) {
	var h4orders = $('.order .data h4:eq(0)');
	var h4amount = $('.order .data h4:eq(1)');

	$.ajax({
		type: "post",
		url: 'https://px.aibaiba.com/api/Largescreen/datavstudent',
		// contentType: "application/json; charset=utf-8",
		dataType: 'json',
		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
		data: '',
		error: function(data) {
			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
			} else {
				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
			}
		},
		success: function(data) {
			dataObj.day90.orders = data.data.week_arrange
			dataObj.day90.amount = data.data.week_deal
			dataObj.day365.orders = data.data.z_arrange
			dataObj.day365.amount = data.data.z_deal
			h4orders.html(dataObj.day365.orders);
			h4amount.html(dataObj.day365.amount);
			dataObj.day30.orders = data.data.month_arrange
			dataObj.day30.amount = data.data.month_deal
			dataObj.day1.orders = data.data.quarter_arrange
			dataObj.day1.amount = data.data.quarter_deal
			var index = 0;
			// 启动定时器
			// window.setInterval(function() {
			// 	index++;
			// 	if (index > 3) {
			// 		index = 0;
			// 	}
			// 	// 自动触发事件
			// 	$('.order .filter a').eq(index).click();
			// }, 2000);
		}
	});
}
// 订单
(function() {
	// 数据
	var data = {
		// 属性，成员，键
		day365: {
			orders: '20,301,987',
			amount: '99834'
		},
		day90: {
			orders: '301,987',
			amount: '9834'
		},
		day30: {
			orders: '1,987',
			amount: '3834'
		},
		day1: {
			orders: '987',
			amount: '834'
		}
	}

	// 获取h4
	var h4orders = $('.order .data h4:eq(0)');
	var h4amount = $('.order .data h4:eq(1)');


	getDingDan(data)

	window.setInterval(function() {
		getDingDan(data)
	}, 60000);
	// 点击的时候，获取当前a的自定义属性，
	// 根据这个属性在data里面查找对应的对象，把这个对象设置到页面上既可
	$('.order').on('click', '.filter a', function() {
		// 添加类名
		$(this).addClass('active').siblings().removeClass('active');
		// data-key：点击谁就获取谁的
		var key = $(this).attr('data-key');
		// var key = $(this).data('key');
		var val = data[key]; // 如果键名是可以的，必须用对象[属性]
		// 设置内容
		h4orders.html(val.orders);
		h4amount.html(val.amount);
	});



})();

(function() {
	userStatic()

})();

// 右边第二个接口-用户统计    
function userStatic() {
	// 数据
	var dataList = {

		month: [
			[],
			[]
		],
		week: [
			[],
			[]
		]
	}

	let newData = {}
	$.ajax({
		type: "post",
		url: 'https://px.aibaiba.com/api/Largescreen/datavstudent',
		// contentType: "application/json; charset=utf-8",
		dataType: 'json',
		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
		data: '',
		error: function(data) {
			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
			} else {
				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
			}
		},
		success: function(data) {
			console.log(data,'************')
			// dataList.month[0] = Object.values(data.data.montdeal_chart)
			// dataList.month = data.data.montdeal_chart
			let dateTime = new Date()
			for (let s of data.data.montdeal_chart) {
				dataList.month[0] = [...dataList.month[0],s['月']];
				dataList.month[1] = [...dataList.month[1],s['人数']]
			}
			for (let s of data.data.daydeal_chart) {
				let day = new Date(s['日期']).getDate()>9?new Date(s['日期']).getDate()+'日':'0'+new Date(s['日期']).getDate()+'日'
				let mouth =  parseInt(new Date(s['日期']).getMonth()+1)>9?parseInt(new Date(s['日期']).getMonth()+1)+'月':'0'+parseInt(new Date(s['日期']).getMonth()+1)+'月'
				dataList.week[0] = [...dataList.week[0],mouth+''+day];
				dataList.week[1] = [...dataList.week[1],s['人数']];
				// dataList.week = [...dataList.week,{
				// 	name:s['日期'],
				// 	value:s['人数']
				// }]
			}
			console.log(dataList,'日期人数')
			// dataList.week = data.data.daydeal_chart
			// dataList.month[1] = Object.values(data.data.active_data_month)
			// dataList.week[0] = Object.values(data.data.grant_data_day)
			// dataList.week[0] = Object.values(data.data.grant_data_day)
			// dataList.week[1] = Object.values(data.data.active_data_day)
			var option = {
				xAxis: {
					type: 'category',
					data: [],
					axisTick: {
						show: false // 去除刻度线
					},
					axisLabel: {
						color: '#4c9bfd' // 文本颜色
					},
					axisLine: {
						show: false // 去除轴线
					},
					boundaryGap: false // 去除轴内间距
				},

				yAxis: {
					type: 'value',
					axisTick: {
						show: false // 去除刻度
					},
					axisLabel: {
						color: '#4c9bfd' // 文字颜色
					},
					splitLine: {
						lineStyle: {
							color: '#012f4a' // 分割线颜色
						}
					}
				},
				series: [
				// 	{
				// 	name: '发卡数量',
				// 	data: [],
				// 	type: 'line',
				// 	smooth: true,
				// 	itemStyle: {
				// 		color: '#00f2f1' // 线颜色
				// 	}
				// }, 
				{
					name: '激活数量',
					data: [],
					type: 'line',
					smooth: true,
					itemStyle: {
						color: '#ed3f35' // 线颜色
					}
				}],
				// 设置网格样式
				grid: {
					show: true, // 显示边框
					top: '20%',
					left: '3%',
					right: '4%',
					bottom: '3%',
					borderColor: '#012f4a', // 边框颜色
					containLabel: true // 包含刻度文字在内
				},
				legend: {
					textStyle: {
						color: '#4c9bfd' // 图例文字颜色
						//  fontSize
					},
					right: '10%' // 距离右边10%
				},
			};
			// $(jQ对象)==>DOM对象
			var myChart = echarts.init(document.querySelector('.line'))
			myChart.setOption(option);

			var arr = dataList['month'];
			var arr1 = dataList['week'];
			option.series[0].data = arr[1]?arr[1]:[];
			// option.series[1].data = arr1?[{name:arr[1]['月份']+'月份',value:arr[1]['人数']}]:[];
			option.xAxis.data = arr[0]?arr[0]:[];
			//修改完成之后，在此设置 
			myChart.setOption(option);
			// 点击的时候获取自定义属性，通过这个属性，到data里面取出我们要用的数据
			// 之后吧这个数据，是一个数组，第一个数组给series第一个数据，同理第二个给第二个
			$('.sales').on('click', '.caption a', function() {
				$(this).addClass('active').siblings('a').removeClass('active');
				
				// if ($(this).attr('data-type') == 'week') {
				// 	option.xAxis.data = arr1[0]?arr1[0]:[];
				// } else {
				// 	option.xAxis.data = arr[0]?arr[0]:[];
				// }
				// 获取自定义属性
				var arr = dataList[$(this).attr('data-type')];
				option.xAxis.data = arr[0]?arr[0]:[];
				// 设置修改option配置
				option.series[0].data = arr[1]?arr[1]:[];
				// option.series[1].data = arr1[1]?arr1[1]:[];
				//修改完成之后，在此设置 
				myChart.setOption(option);
			});

			// 一样
			var index = 0;
			// 定时器
			// var dsq = window.setInterval(function() {
			// 	index++;
			// 	if (index > 1) {
			// 		index = 0;
			// 	}
			// 	$('.sales .caption a').eq(index).click();
			// }, 2000);

			// // 鼠标进入停止
			// // mouseover == mouseenter
			// // mouseout == mouseleave
			// $('.line').mouseenter(function() {
			// 	window.clearInterval(dsq);
			// });
			// // 鼠标离开启动
			// $('.line').mouseleave(function() {
			// 	dsq = window.setInterval(function() {
			// 		index++;
			// 		if (index > 1) {
			// 			index = 0;
			// 		}
			// 		$('.sales .caption a').eq(index).click();
			// 	}, 2000);
			// });
		},
	});
}



// 卡片分布
(function() {
	let cardView = $(".channel").find(".inner .item h4")
	$.ajax({
		type: "post",
		url: 'https://px.aibaiba.com/api/Largescreen/datavfenbu',
		// contentType: "application/json; charset=utf-8",
		dataType: 'json',
		timeout: 90000, //通过timeout属性，设置超时时间,这里指的是毫秒
		data: '',
		error: function(data) {
			if (data.statusText == 'timeout') { //status == 'timeout'意为超时
			} else {
				console.log(data, '接口报错返回的数据>>>>>>>>>>>>>>>>>>>>')
			}
		},
		success: function(data) {
			cardView[0].innerHTML = data.data.xiaoshou[0].chengjiaolv
			cardView[1].innerHTML = data.data.xiaoshou[0].jihuolv
			cardView[2].innerHTML = data.data.xiaoshou[0].zhuanhualv
			cardView[3].innerHTML = data.data.xiaoshou[0].liushilv
		}
	});

})();


//用户进度
(function() {
	getUserSchedule()
	window.setInterval(function() {
		getUserSchedule()
	}, 60000);


})();
// 获取用户进度
function getUserSchedule() {
	let itemUserView = $(".quarter").find(".inner .item h4")
	let itemUserlable = $(".quarter").find(".inner .box .label")
	$.post(
		'https://px.aibaiba.com/api/Largescreen/datavfenbu',
		function(res, status) {
			if (status == 'success') {
				itemUserView[0].innerHTML = res.data.xiaoshou[0].z_renshu
				itemUserView[1].innerHTML = res.data.xiaoshou[0].xufei
				itemUserlable[0].innerHTML =  res.data.xiaoshou[0].xufeilb+'%'
				let card_num = res.data.xiaoshou[0].z_renshu
				let grant_num = res.data.xiaoshou[0].xufei
				let defaultNum = (grant_num / card_num) * 200
				let num = 200 - defaultNum
				// 配置项
				var option = {
					series: [{
						type: 'pie',
						radius: ['130%', '150%'], // 放大图形
						center: ['48%', '80%'], // 往下移动  套住75%文字
						label: {
							show: false,
						},
						startAngle: 180,
						hoverOffset: 0,
						data: [{
								// 当前用户量
								value: defaultNum < 1 ? 1 : defaultNum,
							}, // 不需要名称
							{
								// 剩余量
								value: num < 1 ? 1 : num,
							}, // 不需要名称
							{
								// 总量
								value: 200,
								itemStyle: {
									color: 'transparent'
								}
							} // 透明隐藏第三块区域
						]
					}]
				};
				var myChart = echarts.init(document.querySelector('.gauge'));
				myChart.setOption(option);
			}
		}
	);
}


(function() {
	let itemUserView = $(".quarter").find(".inner .item h4")
	let chengjiao = $(".chengjiao").find(".all li span")
	// let province = $(".chengjiao").find(".province li .val")
	let province = $(".chengjiao").find(".province .sup li .val")
	$.post(
		'https://px.aibaiba.com/api/Largescreen/datavfenbu',
		function(res, status) {
			if (status == 'success') {
				chengjiao[0].innerHTML = res.data.rank_list&&res.data.rank_list[0]?res.data.rank_list[0].realname:'张三三'
				chengjiao[1].innerHTML = res.data.rank_list&&res.data.rank_list[1]?res.data.rank_list[1].realname:'李四四'
				chengjiao[2].innerHTML =  res.data.rank_list&&res.data.rank_list[2]?res.data.rank_list[2].realname:'王五五'
				province[0].innerHTML = res.data.pxrec_num
				province[1].innerHTML = res.data.pb_num
				province[2].innerHTML = res.data.zixun_num
				province[3].innerHTML = res.data.deal_amount
				province[4].innerHTML = res.data.dealer_num
				
				// 鼠标进入li的时候，我们把数据随机排序，把这个新数组放到页面上
				$('.province').on('mouseenter', '.sup li', function() {
					// 添加类名
					$(this).addClass('active').siblings().removeClass('active');
					// 数组从新排列
					var randomDate = res.data[$(this).attr('data-key')]
					console.log($(this).attr('data-key')=='deal_list','ppppppppassssssssssss')
					// dataList[$(this).attr('data-type')]
					// <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
					// 遍历数组，遍历出来一个，就创建一个li
					let key = $(this).attr('data-key')=='deal_list'?'amount':'count'
					var html = '';
					randomDate.forEach(function(val) {
						console.log(val,'xxxxxxxxx')
						// 当前项
						// val = { name: '可爱多', num: '9,086' }
						html +=
							`<li><span>${val.realname}</span><span>${val[key]?val[key]:0}<s class="icon-up"></s></span></li>`;
					});
					// 放到sub里面
					$('.province .sub').html(html);
				});
				
				// 默认让第一个li触发一次事件
				$('.province .sup li').eq(0).mouseenter();
				
				var index = 0;
				// 开启定时器
				window.setInterval(function() {
					index++;
					if (index > 4) {
						index = 0;
					}
					$('.province .sup li').eq(index).mouseenter();
				}, 2000);
				
				
			}
		}
	);	
	
	// 数据
	var data = [{
			name: '可爱多',
			num: '9,086'
		},
		{
			name: '娃哈哈',
			num: '8,341'
		},
		{
			name: '喜之郎',
			num: '7,407'
		},
		{
			name: '八喜',
			num: '6,080'
		},
		{
			name: '小洋人',
			num: '6,724'
		},
		{
			name: '好多鱼',
			num: '2,170'
		},
	];
	
})();